<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue"
import indexText from "./index.json"
import { requestLatestMV, requestHottestMV, requestNetEaseProd, requestMVRanking } from "../../../utils/axiosURL"

// 最新mv数据
let saveLatestMVData = reactive<any>([])
// 最新mv area
let LatestMVArea = ref<string>('')
// 热播mv 数据
let hottestMV = reactive<any>([])
// 网络出品mv数据
let netEaseProdData = reactive<any>([])
// mv排行初始tag
let mvRankingTag = ref<string>('')
// mv排行
let saveMVRankingData = reactive<any>([])


// 切换地区最新mv
const changeAreaFn = (name: string) => LatestMVArea.value = name
// mv排行切换
const changeRankingFn = (name: string) => mvRankingTag.value = name
// 请求最新MV
const requestLatestMVFn = () => {
  requestLatestMV(10, LatestMVArea.value).then(({ data }: any) => {
    saveLatestMVData.values = data
  }).catch(_ => { })
}
// 请求最热mv
const requestHottestMVFn = () => {
  requestHottestMV().then(({ data }: any) => {
    hottestMV.values = data
  }).catch(_ => { })
}
// 请求网易出品mv
const requestNetEaseProdFn = () => {
  requestNetEaseProd().then(({ data }: any) => {
    netEaseProdData.values = data
  }).catch(_ => { })
}
// mv排行
const requestMVRankingFn = () => {
  requestMVRanking(10, mvRankingTag.value).then(({ data }: any) => {
    saveMVRankingData.values = data
  }).catch(_ => { })
}
watch(LatestMVArea, () => requestLatestMVFn())
watch(mvRankingTag, () => requestMVRankingFn())
onMounted(() => {
  requestLatestMVFn()
  requestHottestMVFn()
  requestNetEaseProdFn()
  requestMVRankingFn()
})


</script>

<template>
  <div class="moduleWrap">
    <div class="latestMV">
      <div class="topCate">
        <RouterLink :to="{ path: '/AllMV' }">
          <p class="leftRight">
            <span>{{ indexText.latestMV }}</span>
            <span class="iconfont icon-xiangyoujiantou"></span>
          </p>
        </RouterLink>
        <div class="rightWrap">
          <ul>
            <li v-for="item in indexText.latestMVCate" @click="changeAreaFn(item.name)"
              :class="item.name === LatestMVArea ? 'active' : ''">{{ item.name }}</li>
          </ul>
        </div>
      </div>
      <div class="latestMVItemWrap">
        <MVItem v-if="saveLatestMVData.values.length" v-for="item in saveLatestMVData.values" :name="item.name"
          :imgurl16v9="item.cover" :duration="item.duration" :playCount="item.playCount" :id="item.id"
          :artistName="item.artistName" />
        <MVItemSkeleton v-else v-for="item in 15" />
      </div>
    </div>
    <div class="hotSowingMV">
      <RouterLink :to="{ path: '/AllMV' }">
        <p class="title">
          <span>{{ indexText.HotSowingMV }}</span>
          <span class="iconfont icon-xiangyoujiantou"></span>
        </p>
      </RouterLink>
      <div class="hotSowingMVItemWrap">
        <MVItem v-if="hottestMV.values.length" v-for="item in hottestMV.values" :name="item.name"
          :imgurl16v9="item.cover" :duration="item.duration" :playCount="item.playCount" :id="item.id"
          :artistName="item.artistName" />
        <MVItemSkeleton v-else v-for="item in 15" />
      </div>
    </div>
    <div class="netEaseProdWrap">
      <RouterLink :to="{ path: '/AllMV' }">
        <p class="title">
          <span>{{ indexText.netEaseProd }}</span>
          <span class="iconfont icon-xiangyoujiantou"></span>
        </p>
      </RouterLink>
      <div class="netEaseProdItemWrap">
        <MVItem v-if="netEaseProdData.values.length" v-for="item in netEaseProdData.values" :name="item.name"
          :imgurl16v9="item.cover" :duration="item.duration" :playCount="item.playCount" :id="item.id"
          :artistName="item.artistName" />
        <MVItemSkeleton v-else v-for="item in 15" />
      </div>
    </div>
    <div class="mvRanking">
      <div class="topCate">
        <RouterLink to="/MVRanking">
          <p class="leftRight">
            <span>{{ indexText.mvRanking }}</span>
            <span class="iconfont icon-xiangyoujiantou"></span>
          </p>
        </RouterLink>
        <div class="rightWrap">
          <ul>
            <li v-for="item in indexText.latestMVCate" @click="changeRankingFn(item.name)"
              :class="item.name === mvRankingTag ? 'active' : ''">{{ item.name }}</li>
          </ul>
        </div>
      </div>
      <div class="mvRankingWrap">
        <ul v-if="saveMVRankingData.values.length">
          <li v-for="(item, index) in saveMVRankingData.values">
            <p class="index">{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</p>
                <div class="leftImgWrap">
                  <RouterLink :to="`/MVDetail/${item.id}`">
                    <img :src="item.cover" alt="">
                  </RouterLink>
                  <p class="rightCount">
                    <span class="iconfont icon-icon-test"></span>
                    <span>{{ parseInt(item.playCount) >= 10000 ? Math.floor(parseInt(item.playCount) / 10000) + '万' :
                    item.playCount }}</span>
                  </p>
                </div>
                <div class="rightWrap">
                  <RouterLink :to="`/MVDetail/${item.id}`">
                    <p class="title">{{ item.name }}</p>
                  </RouterLink>
                  <RouterLink :to="`/SingerDetail/${item.id}`">
                    <p class="name">{{ item.artistName }}</p>
                  </RouterLink>
                </div>
          </li>
        </ul>
        <div class="skeletonWrap" v-else>
          <mvRankingSkeleton V-for="item in 10" />
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.moduleWrap {
  width: 100%;

  .latestMV {
    width: 100%;
    margin-top: 20px;

    .topCate {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding-right: 30px;
      box-sizing: border-box;

      .leftRight {
        @extend .moduleTitle;
        flex-basis: 100px;
      }

      .rightWrap {
        flex: 1;

        ul {
          display: flex;
          justify-content: end;

          li {
            font-size: $font-size-sm;
            font-family: $textFont;
            color: #888;
            padding: 3px 14px;
            border-radius: 25px;
            margin: 0 8px;

            &+li {
              position: relative;

              &::after {
                content: "";
                position: absolute;
                top: 2px;
                left: -9px;
                width: 1px;
                height: 85%;
                background-color: $lineColor;
              }
            }

            &:hover {
              color: #000;
            }
          }

          .active {
            color: $font_red_color !important;
            background-color: rgb(253, 236, 236);
          }
        }
      }
    }

    .latestMVItemWrap {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
    }
  }

  .hotSowingMV {
    width: 100%;
    margin-top: 50px;

    .title {
      @extend .moduleTitle;
    }

    .hotSowingMVItemWrap {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
    }
  }

  .netEaseProdWrap {
    width: 100%;
    margin-top: 50px;

    .title {
      @extend .moduleTitle;
    }

    .netEaseProdItemWrap {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
    }
  }

  .mvRanking {
    width: 100%;
    margin-top: 50px;

    .topCate {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding-right: 30px;
      box-sizing: border-box;

      .leftRight {
        @extend .moduleTitle;
        flex-basis: 140px;
      }

      .rightWrap {
        flex: 1;

        ul {
          display: flex;
          justify-content: end;

          li {
            font-size: $font-size-sm;
            font-family: $textFont;
            color: #888;
            padding: 3px 14px;
            border-radius: 25px;
            margin: 0 8px;
            cursor: pointer;

            &+li {
              position: relative;

              &::after {
                content: "";
                position: absolute;
                top: 2px;
                left: -9px;
                width: 1px;
                height: 85%;
                background-color: $lineColor;
              }
            }

            &:hover {
              color: #000;
            }
          }

          .active {
            color: $font_red_color !important;
            background-color: rgb(253, 236, 236);
          }
        }
      }
    }

    .mvRankingWrap {
      width: 100%;
      padding-right: 40px;
      box-sizing: border-box;

      .index {
        font-size: $font-size-lg2;
        font-family: $activeTextFont;
        color: $font_second_color;
        margin-right: 6px;
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        li {
          display: flex;
          align-items: center;
          width: 50%;
          height: 135px;
          box-sizing: border-box;
          padding-left: 8px;

          .leftImgWrap {
            position: relative;
            flex-basis: 180px;
            width: 180px;
            height: 90px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 8px;
            }

            .rightCount {
              position: absolute;
              top: 0;
              right: 4px;
              font-family: $textFont;
              font-size: $font-size-sm;
              color: #fff;
            }
          }

          .rightWrap {
            flex: 1;
            height: 100%;
            padding: 27px 0;
            box-sizing: border-box;
            padding-left: 8px;

            .title {
              font-size: $font-size-sm;
              font-family: $textFont;
              color: $font_main_color;
              margin-bottom: 16px;
            }

            .name {
              font-size: $font-size-xs;
              font-family: $textFont;
              color: $font_main_color;
            }
          }

          &:nth-child(2) {
            border-top: none;
          }

          &:nth-child(even) {
            border-left: 1px solid $lineColor;
          }

          &~li {
            border-top: 1px solid $lineColor;
          }
        }
      }

      .skeletonWrap {
        display: flex;
        flex-wrap: wrap;
      }
    }
  }

}

@media screen and (max-width: 1200px) {
  .latestMVItemWrap {
    height: 360px !important;
    overflow: hidden;
  }
}

@media screen and (max-width: 1200px) {
  .hotSowingMVItemWrap {
    height: 360px !important;
    overflow: hidden;
  }
}

@media screen and (max-width: 1200px) {
  .netEaseProdItemWrap {
    height: 360px !important;
    overflow: hidden;
  }
}
</style>
